<template>
  <div class="departments-container">
    <el-card>
      <treeNode :tree-node="company" :is-root="false" @add="addFn" />
    </el-card>
    <el-tree v-loading="loading" :data="departs" :default-expand-all="true" :props="defaultProps">
      <treeNode slot-scope="{ data }" :tree-node="data" @add="addFn" @edit="editFn" @refresh="getDepartmentsFn" />
    </el-tree>
    <addDepart
      ref="addDept"
      :dialog-visible.sync="dialogVisible"
      :crrent-node="crrentNode"
    />
  </div>
</template>

<script>
import treeNode from '@/views/departments/components/treeNode'
import { getDepartmentsApi } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index1.js'
import addDepart from '@/views/departments/components/add-depart'
export default {
  name: 'DepartmentsIndex',
  components: { treeNode, addDepart },
  data() {
    return {
      defaultProps: {
        label: 'name'
      },
      departs: [],
      dialogVisible: false,
      crrentNode: {},
      company: {},
      loading: false
    }
  },
  created() {
    this.getDepartmentsFn()
  },
  methods: {
    async getDepartmentsFn() {
      try {
        this.loading = true
        const res = await getDepartmentsApi()
        // console.log(res)
        // this.departs = res.depts
        this.departs = tranListToTreeData(res.depts, '')
        this.company = { name: res.companyName, manager: '负责人', id: '' }
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    addFn(treeNode) {
      // console.log('父', treeNode)
      this.crrentNode = treeNode
      this.dialogVisible = true
    },
    editFn(node) {
      // debugger
      this.dialogVisible = true
      this.currentNode = node
      // console.log('编辑', this.currentNode)
      this.$refs.addDept.formData = { ...node }
    }
  }
}
</script>

<style lang="scss">
.departments-container {
  background-color: #999 !important;
  width: 900px;
  margin: 20px auto;
  .el-tree {
    .el-tree-node__content {
      padding-right: 20px;
    }
  }
}
</style>
